<template>
	<uni-popup class="popup-panel" ref="popupRef" type="bottom" :is-mask-click="true" border-radius="10px 10px 0 0"
		background-color="#fff">
		<view class="rule-select">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="goods">
					<view class="close-btn" @click="handleClose()">
						<uni-icons type="closeempty" size="24"></uni-icons>
					</view>

					<u-image :src="$imageUrl(goods.logo)" width="200" height="200" border-radius="8"></u-image>
					<view class="info">
						<view>{{goods.name}}</view>
						<view class="goods-price" v-if="goods.exchange_type == 1">
							<text>{{goods.points}}</text>
							<text style="font-size: 24rpx; margin: 0 10rpx;">积分</text>
						</view>
						<view class="goods-price" v-if="goods.exchange_type == 2">
							<text>{{goods.points}}</text>
							<text style="font-size: 24rpx; margin: 0 10rpx;">积分</text>
							<text class="unit">+</text>
							<text class="num">￥{{ price[0] }}</text>
							<text class="decimal">.{{ price[1] }}</text>
						</view>
						<view class="goods-price" v-if="goods.exchange_type == 0">
							<text class="num">￥{{ price[0] }}</text>
							<text class="decimal">.{{ price[1] }}</text>
						</view>
					</view>
				</view>
				<view class="rule-cell">
					<view class="label">规格</view>
					<view class="select-list">
						<text :key="index" v-for="(guige ,index) in goods.goods_spec" @click="selectType(index,guige)"
							:class="{active:curent == index}"> {{guige.title}}</text>
					</view>
				</view>

				<view class="count">
					<text class="label">购买数量</text>
					<u-number-box :min="min" :max="goods.stock" @change="numChange"></u-number-box>
				</view>
			</scroll-view>

			<view class="btn-group">
				<button @click="addCart(1)" type="error" shape="circle">立即购买</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		inject,
		computed,
	} from 'vue';

	defineOptions({
		name: 'integral-sku'
	});

	const props = defineProps({
		goods: {
			type: Object,
			default: {},
		},
	})

	const price = computed(() => {
		let numArr = (Number(props.goods.sale_price).toFixed(2) + '').split('.');
		return numArr;
	})

	const state = reactive({
		curent: 0,
		selectItem: false,
		selectNum: 1,
		min: 1,
		max: 100,
	});

	const popupRef = ref(null);

	// 打开
	function handleOpen() {
		popupRef.value.open();
	}

	// 关闭
	function handleClose() {
		popupRef.value.close();
	}

	defineExpose({
		open: handleOpen,
		close: handleClose
	});

	// 切换规格
	function selectType(index, data) {
		state.curent = index;
		state.selectItem = data;
		state.goods.sale_price = data.price;
		state.goods.logo = data.thumb;
	}

	// 数量发生变化
	function numChange(e) {
		state.selectNum = e.value;
	}

	// 加入购物车和立即购买
	function addCart(buy_now) {
		// 规格
		let spec = state.goods.goods_spec;

		// 没有选，获取默认
		if (!state.selectItem) {
			state.selectItem = spec[state.curent];
		}
		console.log("111", state.goods, state.selectItem);
		console.log('库存', state.selectItem.stock);
		if (state.selectItem.stock === 0) {
			util.showTip("库存不足");
			hide();
			return;
		}
		let res = {};
		res.buy_now = buy_now;
		res.selectItem = state.selectItem;
		res.selectNum = state.selectNum;
		res.goods = state.goods;
		uni.$emit("addCardOk", res);
		hide();
	}

	const {
		curent,
		selectItem,
		selectNum,
		min,
		max,
	} = toRefs(state);
</script>

<style lang="scss">
	.popup-panel {
		.rule-select {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			height: 100%;
			padding: $m20;

			.scroll-view {
				flex: 1;
				overflow: hidden;

				.goods {
					display: flex;
					align-items: flex-end;

					.close-btn {
						position: fixed;
						top: 10rpx;
						right: 10rpx;
					}

					.info {
						flex: 1;
						margin-left: $m20;

						.goods-price {
							font-size: 48rpx;
							color: #fa3534;

							view,
							text {
								font-size: inherit;
							}

							display: inline-block;

							text {
								vertical-align: baseline;
								color: #fa3534;
							}

							.num {
								font-size: 42rpx;
								color: #fa3534;
							}

							.unit,
							.decimal {
								font-size: 60%;
								font-weight: 500;
								color: #fa3534;
							}

							.unit {
								margin-right: -0.25em;
							}
						}

						.select-desc {
							margin-top: $m12;
							font-size: $font-24;
							color: $u-tips-color;

							text {
								margin-left: $m8;
								color: $u-content-color;
							}
						}
					}
				}

				.rule-cell {
					margin-top: $m24;

					.label {
						color: $u-main-color;
					}

					.select-list {
						display: flex;
						flex-wrap: wrap;
						margin-top: $m16;

						text {
							margin: 0 $m16 $m16 0;
							padding: 0.3em 1em;
							font-size: $font-24;
							color: $u-content-color;
							border-radius: $radius-100;
							border: 1px solid $u-border-color;

							&.active {
								background-color: #279dfa;
								color: #fff;
							}
						}
					}
				}

				.count {
					@include f-between;
					margin-top: $m20;

					.label {
						color: $u-main-color;
					}
				}
			}

			.btn-group {
				@include f-between;

				button {
					width: 100%;
					border-radius: 50rpx;
					background: linear-gradient(to right, #125cd7, #279dfa);
					color: #ffffff;
				}
			}
		}
	}
</style>